<div class="middle surface-shaded" ng-show="deploymentConfig">
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded">Loading...</div>
          <div ng-if="loaded">
            <h1>
              Edit Deployment Config {{deploymentConfig.metadata.name}}
            </h1>
            <fieldset ng-disabled="disableInputs">
              <form class="edit-form" name="form" novalidate>
                <div class="section">
                  <h3>Deployment Strategy</h3>
                  <dl class="dl-horizontal left">
                    {{strategyParamsName}}
                    <div class="form-group strategy-name">
                      <label class="picker-label">Strategy Type</label>
                      <ui-select ng-model="strategyData.type" search-enabled="false" ng-change="strategyChanged()">
                        <ui-select-match>{{$select.selected}}</ui-select-match>
                        <ui-select-choices repeat="strategyType in deploymentConfigStrategyTypes">
                          {{strategyType}}
                        </ui-select-choices>
                      </ui-select>
                      <div>
                        <span ng-switch="strategyData.type">
                          <span class="help-block" ng-switch-when="Recreate">
                            The recreate strategy has basic rollout behavior and supports lifecycle hooks for injecting code into the deployment process.
                            <a ng-href="{{'recreate_strategy' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
                          </span>
                          <span class="help-block" ng-switch-when="Rolling">
                            The rolling strategy will wait for pods to pass their readiness check, scale down old components and then scale up.
                            <a ng-href="{{'rolling_strategy' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
                          </span>
                          <span class="help-block" ng-switch-when="Custom">
                            The custom strategy allows you to specify container image that will provide your own deployment behavior.
                            <a ng-href="{{'custom_strategy' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
                          </span>
                        </span>
                      </div>
                    </div>

                    <div ng-if="strategyData.type === 'Custom'" >
                      <div class="form-group">
                        <label for="imageName" class="required">Image Name</label>
                        <div>
                          <input class="form-control"
                            id="imageName"
                            name="imageName"
                            ng-model="strategyData.customParams.image"
                            type="text"
                            autocorrect="off"
                            autocapitalize="none"
                            spellcheck="false"
                            aria-describedby="image-name-help"
                            required>
                        </div>
                        <div class="help-block" id="image-name-help">An image that can carry out the deployment.</div>
                      </div>

                      <div class="form-group">
                        <label>Command</label>
                        <edit-command args="strategyData.customParams.command"></edit-command>
                      </div>
                      <div class="form-group">
                        <label>Environment Variables</label>
                        <key-value-editor
                          entries="strategyData.customParams.environment"
                          key-validator="[a-zA-Z_][a-zA-Z0-9_]*"
                          key-validator-error-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
                          value-from-selector-options="valueFromObjects"
                          add-row-link="Add Value"
                          add-row-with-selectors-link="Add Value from Config Map or Secret"></key-value-editor>
                      </div>
                    </div>
                    <div ng-if="strategyData.type !== 'Custom'" >
                      <div class="form-group">
                        <label for="strategyTimeout">Timeout</label>
                        <span class="input-group"
                           ng-class="{ 'has-error': form.strategyTimeout.$invalid && form.strategyTimeout.$touched }">
                          <input id="strategyTimeout"
                              type="number"
                              name="strategyTimeout"
                              ng-model="strategyData[strategyParamsPropertyName].timeoutSeconds"
                              placeholder="600"
                              pattern="\d*"
                              min="0"
                              select-on-focus
                              class="form-control"
                              aria-describedby="strategyTimeout">
                          <span class="input-group-addon">seconds</span>
                        </span>
                        <div class="help-block" ng-attr-id="strategyTimeout">
                          How long to wait for a pod to scale up before giving up.
                        </div>
                        <div ng-if="form.strategyTimeout.$invalid && form.strategyTimeout.$touched" class="has-error">
                          <div ng-if="form.strategyTimeout.$error.number" class="help-block">
                            Must be a number.
                          </div>
                          <div ng-if="form.strategyTimeout.$error.min" class="help-block">
                            Timeout can't be negative.
                          </div>
                          <span ng-if="form.strategyTimeout.$error.pattern && !form.strategyTimeout.$error.min" class="help-block">
                            Must be a whole number.
                          </span>
                        </div>
                      </div>

                      <div ng-if="strategyData.type === 'Rolling'">
                        <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                        <div ng-show="view.advancedStrategyOptions">
                          <div class="form-group">
                            <label for="updatePeriod">Update Period</label>
                            <span class="input-group"
                               ng-class="{ 'has-error': form.updatePeriod.$invalid && form.updatePeriod.$touched }">
                              <input id="updatePeriod"
                                  type="number"
                                  placeholder="1"
                                  name="updatePeriod"
                                  ng-model="strategyData[strategyParamsPropertyName].updatePeriodSeconds"
                                  pattern="\d*"
                                  min="0"
                                  select-on-focus
                                  class="form-control"
                                  aria-describedby="updatePeriod">
                              <span class="input-group-addon">seconds</span>
                            </span>
                            <div class="help-block" id="updatePeriod">
                              Time to wait between retrying to run individual pod.
                            </div>
                            <div ng-if="form.updatePeriod.$invalid && form.updatePeriod.$touched" class="has-error">
                              <div ng-if="form.updatePeriod.$error.number" class="help-block">
                                Must be a number.
                              </div>
                              <div ng-if="form.updatePeriod.$error.min" class="help-block">
                                Update period can't be negative.
                              </div>
                              <span ng-if="form.updatePeriod.$error.pattern && !form.updatePeriod.$error.min" class="help-block">
                                Must be a whole number.
                              </span>
                            </div>
                          </div>

                          <div class="form-group">
                            <label for="interval">Interval</label>
                            <span class="input-group"
                               ng-class="{ 'has-error': form.interval.$invalid && form.interval.$touched }">
                              <input id="interval"
                                  type="number"
                                  placeholder="1"
                                  name="interval"
                                  ng-model="strategyData[strategyParamsPropertyName].intervalSeconds"
                                  pattern="\d*"
                                  min="0"
                                  select-on-focus
                                  class="form-control"
                                  aria-describedby="interval">
                              <span class="input-group-addon">seconds</span>
                            </span>
                            <div class="help-block" ng-attr-id="interval">
                              Time to wait between polling deployment status after running a pod.
                            </div>
                            <div ng-if="form.interval.$invalid && form.interval.$touched" class="has-error">
                              <div ng-if="form.interval.$error.number" class="help-block">
                                Must be a number.
                              </div>
                              <div ng-if="form.interval.$error.min" class="help-block">
                                Interval can't be negative.
                              </div>
                              <span ng-if="form.interval.$error.pattern && !form.interval.$error.min" class="help-block">
                                Must be a whole number.
                              </span>
                            </div>
                          </div>
                        </div>

                        <div class="form-group">
                          <label for="maxUnavailable">Maximum Number of Unavailable Pods</label>
                          <div ng-class="{ 'has-error': form.maxUnavailable.$invalid && form.maxUnavailable.$touched }">
                            <input id="maxUnavailable"
                                type="text"
                                placeholder="25%"
                                name="maxUnavailable"
                                ng-model="strategyData[strategyParamsPropertyName].maxUnavailable"
                                ng-pattern="/^\d+%?$/"
                                select-on-focus
                                class="form-control"
                                aria-describedby="max-unavailable-help">
                          </div>
                          <div class="help-block">
                            The maximum number of pods that can be unavailable during the rolling deployment. This can be either a percentage (10%) or a whole number (1).
                          </div>
                          <div ng-if="form.maxUnavailable.$invalid && form.maxUnavailable.$touched && form.maxUnavailable.$error.pattern" class="has-error">
                            <span class="help-block">
                              Must be a non-negative whole number or percentage.
                            </span>
                          </div>
                        </div>

                        <div class="form-group">
                          <label for="maxSurge">Maximum Number of Surge Pods</label>
                          <div ng-class="{ 'has-error': form.maxSurge.$invalid && form.maxSurge.$touched }">
                            <input id="maxSurge"
                                type="text"
                                placeholder="25%"
                                name="maxSurge"
                                ng-model="strategyData[strategyParamsPropertyName].maxSurge"
                                ng-pattern="/^\d+%?$/"
                                select-on-focus
                                class="form-control"
                                aria-describedby="maxSurge">
                          </div>
                          <div class="help-block">
                            The maximum number of pods that can be scheduled above the original number of pods while the rolling deployment is in progress. This can be either a percentage (10%) or a whole number (1).
                          </div>
                          <div ng-if="form.maxSurge.$invalid && form.maxSurge.$touched && form.maxSurge.$error.pattern" class="has-error">
                            <span class="help-block">
                              Must be a non-negative whole number or percentage.
                            </span>
                          </div>
                        </div>
                      </div>

                      <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                      <div ng-show="view.advancedStrategyOptions">
                        <div class="lifecycle-hooks">
                          <div class="lifecycle-hook" id="pre-lifecycle-hook">

                            <h3>Pre Lifecycle Hook</h3>
                            <edit-lifecycle-hook
                              model="strategyData[strategyParamsPropertyName].pre"
                              type="pre"
                              available-volumes="volumeNames"
                              available-containers="containerNames"
                              available-secrets="availableSecrets"
                              available-config-maps="availableConfigMaps"
                              namespace="projectName">
                            </edit-lifecycle-hook>
                          </div>

                          <div ng-if="strategyData.type !== 'Rolling'" class="lifecycle-hook" id="mid-lifecycle-hook" >
                            <h3>Mid Lifecycle Hook</h3>
                            <edit-lifecycle-hook
                              model="strategyData[strategyParamsPropertyName].mid"
                              type="mid"
                              available-volumes="volumeNames"
                              available-containers="containerNames"
                              available-secrets="availableSecrets"
                              available-config-maps="availableConfigMaps"
                              namespace="projectName">
                            </edit-lifecycle-hook>
                          </div>

                          <div class="lifecycle-hook" id="post-lifecycle-hook" >
                            <h3>Post Lifecycle Hook</h3>
                            <edit-lifecycle-hook
                              model="strategyData[strategyParamsPropertyName].post"
                              type="post"
                              available-volumes="volumeNames"
                              available-containers="containerNames"
                              available-secrets="availableSecrets"
                              available-config-maps="availableConfigMaps"
                              namespace="projectName">
                            </edit-lifecycle-hook>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mar-top-lg" ng-if="strategyData.type !== 'Custom'">
                      <div ng-if="!view.advancedStrategyOptions">To set additional parameters or edit lifecycle hooks, view <a href="" ng-click="view.advancedStrategyOptions = true">advanced strategy options.</a></div>
                      <a ng-if="view.advancedStrategyOptions" href="" ng-click="view.advancedStrategyOptions = false">Hide Advanced Strategy Options</a>
                    </div>
                  </dl>
                </div>


                <div class="section">
                  <h3 class="with-divider">Images</h3>
                  <dl class="dl-horizontal left">

                    <div ng-repeat="(containerName, containerConfig) in containerConfigByName">
                      <div class="container-name">
                        <h4>Container {{containerName}}</h4>
                      </div>
                      <div class="checkbox form-group">
                        <label>
                          <input type="checkbox" ng-model="containerConfig.hasDeploymentTrigger">
                          Deploy images from an image stream tag
                        </label>
                      </div>
                      <div ng-if="containerConfig.hasDeploymentTrigger">
                        <label class="required">Image Stream Tag</label>
                        <istag-select model="containerConfig.triggerData.istag" select-required="true" select-disabled="disableInputs" include-shared-namespace="true"></istag-select>

                        <div class="checkbox form-group">
                          <label>
                            <input type="checkbox" ng-model="containerConfig.triggerData.automatic">
                            Automatically start a new deployment when the image changes
                          </label>
                        </div>
                      </div>

                      <div ng-if="!containerConfig.hasDeploymentTrigger" class="form-group">
                        <label for="imageName" class="required">Image Name</label>
                        <input class="form-control"
                          id="imageName"
                          name="imageName"
                          ng-model="containerConfig.image"
                          type="text"
                          autocorrect="off"
                          autocapitalize="none"
                          spellcheck="false"
                          required>
                      </div>
                    </div>

                    <div class="checkbox form-group">
                      <label>
                        <input type="checkbox" ng-model="triggers.hasConfigTrigger">
                        Automatically start a new deployment when the deployment configuration changes
                      </label>
                    </div>

                    <!-- Use ng-show instead of ng-if so the form is still marked invalid if a hidden field has errors. -->
                    <div ng-show="view.advancedImageOptions">
                      <div class="mar-top-lg">
                        <osc-secrets model="secrets.pullSecrets"
                                    namespace="projectName"
                                    display-type="pull"
                                    type="image"
                                    secrets-by-type="secretsByType"
                                    service-account-to-link="default"
                                    alerts="alerts"
                                    allow-multiple-secrets="true">
                        </osc-secrets>
                      </div>
                    </div>

                    <div class="mar-top-lg">
                      <div ng-if="!view.advancedImageOptions">To set secrets for pulling your images from private image registries, view <a href="" ng-click="view.advancedImageOptions = true">advanced image options.</a></div>
                      <a ng-if="view.advancedImageOptions" href="" ng-click="view.advancedImageOptions = false">Hide Advanced Image Options</a>
                    </div>
                  </dl>
                </div>


                <div class="section">
                  <h3 class="with-divider">Environment Variables</h3>

                  <div ng-repeat="(containerName, containerConfig) in containerConfigByName">
                    <div class="container-name">
                      <h4>Container {{containerName}}</h4>
                    </div>
                    <key-value-editor
                      ng-if="containerConfig"
                      entries="containerConfig.env"
                      value-from-selector-options="valueFromObjects"
                      key-validator="[a-zA-Z_][a-zA-Z0-9_]*"
                      key-validator-error-tooltip="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
                      add-row-link="Add Value"
                      add-row-with-selectors-link="Add Value from Config Map or Secret"></key-value-editor>
                  </div>
                </div>

                <pause-rollouts-checkbox
                    deployment="updatedDeploymentConfig"
                    always-visible="true">
                </pause-rollouts-checkbox>

                <div class="buttons gutter-top-bottom">
                  <button ng-click="save()" class="btn btn-primary btn-lg" ng-disabled="form.$invalid || form.$pristine || disableInputs">
                    Save
                  </button>
                  <button ng-click="cancel()" class="btn btn-default btn-lg">Cancel</button>
                </div>
              </form>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
